<template>
    <div class="fft-config-step">
        <div class="fft-container">
            <!-- 左侧通道面板 -->
            <div class="left-panel">
                <div class="slots-section">
                    <div class="section-header">
                        <h3>通道 (Slots)</h3>
                        <input type="text" v-model="state.searchQuery" placeholder="搜索" class="search-input">
                    </div>

                    <!-- 通道列表 -->
                    <div class="channel-list">
                        <div v-for="channel in filteredChannels" :key="channel.id" class="channel-item"
                            @click="handleChannelClick(channel)">
                            <label class="checkbox-label">
                                <input type="checkbox" :value="channel.id" v-model="state.selectedChannels">
                                <span class="checkmark"></span>
                                {{ channel.name }}
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧设置面板 -->
            <div class="right-panel">
                <div class="tabs">
                    <button v-for="tab in state.tabs" :key="tab" :class="{ active: state.activeTab === tab }"
                        @click="state.activeTab = tab">
                        {{ tab }}
                    </button>
                </div>

                <div class="settings-content">
                    <!-- 基本页面内容 -->
                    <div v-if="state.activeTab === '基本'">
                        <div class="form-section">
                            <div class="form-row">
                                <label class="form-label">频谱输出</label>
                                <div class="checkbox-group horizontal">
                                    <label v-for="item in state.spectrumOutputs" :key="item" class="checkbox-label">
                                        <input type="checkbox" :value="item" v-model="state.selectedSpectrumOutputs">
                                        <span class="checkmark"></span>
                                        {{ item }}
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- 幅值类型 -->
                        <div class="form-section">
                            <div class="form-row">
                                <label class="form-label">幅值类型</label>
                                <select class="styled-select" v-model="state.amplitudeType">
                                    <option v-for="type in state.amplitudeOptions" :value="type" :key="type">
                                        {{ type }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <!-- 窗函数 -->
                        <div class="form-section">
                            <div class="form-row">
                                <label class="form-label">窗</label>
                                <select class="styled-select" v-model="state.windowType">
                                    <option v-for="option in state.windowOptions" :value="option" :key="option">
                                        {{ option }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <!-- 分辨率设置 -->
                        <div class="resolution-section">
                            <h3 class="section-title">分辨率设置</h3>

                            <!-- 参数选择行 -->
                            <div class="dual-selector">
                                <div class="param-type">
                                    <select class="styled-select type-select" v-model="state.selectedParamType"
                                        @change="updateParamOptions">
                                        <option value="lines">线数</option>
                                        <option value="df">Df [Hz]</option>
                                        <option value="duration">Block duration [s]</option>
                                    </select>
                                </div>

                                <div class="param-value">
                                    <select class="styled-select" v-model="state.selectedValue"
                                        @change="handleValueChange" :disabled="state.selectedParamType === 'duration'">
                                        <!-- 动态选项 -->
                                        <option v-for="(item, index) in currentOptions" :value="item.value" :key="index"
                                            :selected="state.selectedParamType === 'duration' ? item.value === 0.1024 : true">
                                            {{ state.selectedParamType === 'duration' ? '0.1024' : item.display }}
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <!-- 重叠与模式设置 -->
                            <div class="params-group">
                                <!-- 重叠设置 -->
                                <div class="form-item">
                                    <label class="form-label">重叠</label>
                                    <select class="styled-select" v-model="state.overlapValue">
                                        <option v-for="p in state.overlapOptions" :value="p" :key="p">
                                            {{ p }}%
                                        </option>
                                    </select>
                                </div>

                                <!-- 模式选择 -->
                                <div class="form-item">
                                    <label class="form-label">模式</label>
                                    <select class="styled-select" v-model="state.selectedMode">
                                        <option v-for="mode in state.modeOptions" :value="mode" :key="mode">
                                            {{ mode }}
                                        </option>
                                    </select>
                                </div>

                                <!-- Overall模式设置 -->
                                <template v-if="state.selectedMode === 'Overall'">
                                    <div class="form-item">
                                        <label class="form-label">类型</label>
                                        <select class="styled-select" v-model="state.selectedOverallType">
                                            <option v-for="type in state.overallTypes" :value="type" :key="type">
                                                {{ type }}
                                            </option>
                                        </select>
                                    </div>
                                    <!-- Tau输入 -->
                                    <div class="form-item" v-if="state.selectedOverallType === 'Energy (exp.)'">
                                        <label class="form-label">Tau</label>
                                        <input type="number" class="styled-input" v-model.number="state.overallTau"
                                            step="0.1" min="0">
                                    </div>
                                </template>

                                <!-- 基于块模式设置 -->
                                <template v-if="state.selectedMode === '基于块'">
                                    <div class="form-item">
                                        <label class="form-label">类型</label>
                                        <select class="styled-select" v-model="state.selectedBlockType">
                                            <option v-for="type in state.blockTypes" :value="type" :key="type">
                                                {{ type }}
                                            </option>
                                        </select>
                                    </div>
                                    <div class="form-item">
                                        <label class="form-label">块大小</label>
                                        <input type="number" class="styled-input" v-model.number="state.blockValue"
                                            min="1" step="1" @input="validateBlockInput">
                                    </div>
                                    <!-- Tau输入 -->
                                    <div class="form-item" v-if="state.selectedBlockType === 'Energy (exp.)'">
                                        <label class="form-label">Tau</label>
                                        <input type="number" class="styled-input" v-model.number="state.blockTau"
                                            step="0.1" min="0">
                                    </div>
                                </template>
                            </div>

                            <!-- 直流分量控制 -->
                            <div class="params-group">
                                <div class="form-item dc-control">
                                    <label class="checkbox-label">
                                        <input type="checkbox" v-model="state.dcEnabled" @change="handleDcToggle">
                                        <span class="checkmark"></span>
                                        去除直流分量
                                    </label>
                                    <select class="styled-select hz-select" v-model="state.dcValue"
                                        :disabled="!state.dcEnabled">
                                        <option v-for="val in state.dcValues" :value="val" :key="val">
                                            {{ val }}
                                        </option>
                                    </select>
                                    <span class="unit">Hz</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 高级页面内容 -->
                    <div v-if="state.activeTab === '高级'">
                        <!-- 第一行：幅值功能 + 频率计权 -->
                        <div class="form-section">
                            <div class="dual-row">
                                <div class="form-item combo-item">
                                    <label class="form-label">幅值功能</label>
                                    <select class="styled-select" v-model="state.amplitudeFunction">
                                        <option v-for="func in state.amplitudeFunctions" :value="func" :key="func">{{
                                            func }}</option>
                                    </select>
                                </div>
                                <div class="form-item combo-item">
                                    <label class="form-label">频率计权</label>
                                    <select class="styled-select" v-model="state.frequencyWeighting">
                                        <option v-for="weight in state.frequencyWeightings" :value="weight"
                                            :key="weight">{{ weight }}
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- 第二行：交叉谱 + 参照信号 -->
                        <div class="form-section">
                            <div class="dual-row">
                                <div class="form-item combo-item">
                                    <div class="checkbox-wrapper">
                                        <label class="checkbox-label">
                                            <input type="checkbox" v-model="state.crosspowerEnabled"
                                                @change="handleCrosspowerChange">
                                            <span class="checkmark"></span>
                                            交叉谱 Crosspower
                                        </label>
                                    </div>
                                </div>
                                <div class="form-item combo-item">
                                    <label class="form-label">参照信号</label>
                                    <select class="styled-select" v-model="state.referenceSignal"
                                        :disabled="!state.crosspowerEnabled"
                                        :style="{ opacity: state.crosspowerEnabled ? 1 : 0.7 }">
                                        <option v-for="signal in state.referenceSignalsOptions" :value="signal"
                                            :key="signal">{{ signal }}
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-section">
                            <div class="triple-column">
                                <!-- 频域单位 -->
                                <div class="form-item">
                                    <label class="form-label">频域单位</label>
                                    <select class="styled-select" v-model="state.frequencyUnit">
                                        <option v-for="unit in state.frequencyUnits" :value="unit" :key="unit">
                                            {{ unit }}
                                        </option>
                                    </select>
                                </div>

                                <!-- 输出物理量 -->
                                <div class="form-item">
                                    <label class="form-label">输出物理量</label>
                                    <select class="styled-select disabled-select" disabled>
                                        <option>&lt;同输入&gt;</option>
                                    </select>
                                </div>

                                <!-- 输出单位 -->
                                <div class="form-item">
                                    <label class="form-label">输出单位</label>
                                    <select class="styled-select disabled-select" disabled>
                                        <option>&lt;同输入&gt;</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-section">
                            <div class="dual-column">
                                <div class="form-item">
                                    <div class="checkbox-group">
                                        <label class="checkbox-label">
                                            <input type="checkbox" v-model="state.limitRangeEnabled"
                                                @change="handleLimitRangeChange">
                                            <span class="checkmark"></span>
                                            Limit range
                                        </label>
                                    </div>
                                </div>
                                <div class="form-item">
                                    <input type="number" class="styled-input" :value="displayFrequency"
                                        :disabled="!state.limitRangeEnabled" @input="handleFrequencyInput" step="0.1"
                                        max="10000" :class="{ 'disabled-input': !state.limitRangeEnabled }">
                                </div>
                            </div>
                        </div>


                        <div class="form-section">
                            <div class="output-control-group">
                                <!-- 单选框 -->
                                <div class="checkbox-group">
                                    <label class="checkbox-label">
                                        <input type="checkbox" v-model="state.outputControlEnabled"
                                            @change="handleOutputControlChange">
                                        <span class="checkmark"></span>
                                        停止，在
                                    </label>
                                </div>

                                <!-- 输入控件 -->
                                <div class="dual-inputs">
                                    <input type="number" class="styled-input" :value="displayOutputValue"
                                        :disabled="!state.outputControlEnabled" @input="handleOutputValueInput" min="0"
                                        step="1" :max="state.maxOutputValue">
                                    <select class="styled-select" v-model="state.outputUnit"
                                        :disabled="!state.outputControlEnabled">
                                        <option v-for="unit in state.outputUnits" :value="unit" :key="unit">
                                            {{ unit }}
                                        </option>
                                    </select>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- 标量页面 -->
                    <div v-if="state.activeTab === '标量'">
                        <div class="scalar-settings">
                            <!-- 标量输出 -->
                            <div class="form-section">
                                <h3 class="section-title">标量输出</h3>
                                <div class="checkbox-group vertical">
                                    <label v-for="type in state.scalarTypes" :key="type" class="checkbox-label"
                                        :class="{ disabled: !rangeEnabled }">
                                        <input type="checkbox" :value="type" v-model="state.selectedScalars"
                                            :disabled="!rangeEnabled">
                                        <span class="checkmark"></span>
                                        {{ type }}
                                    </label>
                                </div>
                            </div>

                            <!-- 频率范围 -->
                            <div class="form-section">
                                <h3 class="section-title">标量输出频率范围</h3>
                                <div class="dual-column">
                                    <!-- Full Range -->
                                    <div class="form-item">
                                        <label class="checkbox-label">
                                            <input type="checkbox" v-model="state.fullRange"
                                                @change="handleRangeChange">
                                            <span class="checkmark"></span>
                                            Full range
                                        </label>
                                    </div>

                                    <!-- Custom Range -->
                                    <div class="form-item">
                                        <label class="checkbox-label">
                                            <input type="checkbox" v-model="state.customRange"
                                                @change="handleRangeChange">
                                            <span class="checkmark"></span>
                                            Custom range
                                        </label>
                                    </div>
                                </div>

                                <!-- 自定义频率输入 -->
                                <div v-if="showCustomInput" class="frequency-inputs">
                                    <input type="number" class="styled-input" v-model.number="state.startFreq" min="0"
                                        :max="state.endFreq" step="0.01">
                                    <span class="hyphen">-</span>
                                    <input type="number" class="styled-input" v-model.number="state.endFreq"
                                        :min="state.startFreq" max="10000" step="0.01">
                                    <span class="unit">Hz</span>
                                </div>
                                <div v-if="showLastRange" class="last-range">
                                    最后设置范围：{{ state.lastRange.start }} - {{ state.lastRange.end }} Hz
                                </div>
                            </div>

                        </div>
                        <div class="harmonic-section">
                            <div class="settings-group">
                                <h3 class="group-title">谐波设置</h3>

                                <!-- 第一行：勾选框 -->
                                <div class="dual-checkbox">
                                    <div class="checkbox-item">
                                        <label class="checkbox-label">
                                            <input type="checkbox" v-model="state.harmonicInterpolation"
                                                @change="updateHarmonicStatus">
                                            <span class="checkmark"></span>
                                            谐波插值
                                        </label>
                                    </div>
                                    <div class="checkbox-item">
                                        <label class="checkbox-label">
                                            <input type="checkbox" v-model="state.thdEnabled"
                                                @change="updateHarmonicStatus">
                                            <span class="checkmark"></span>
                                            THD
                                        </label>
                                    </div>
                                </div>

                                <!-- 第二行：输入控件 -->
                                <div class="dual-controls">
                                    <!-- 谐波输入 -->
                                    <div class="control-item">
                                        <label class="control-label">谐波</label>
                                        <input type="number" class="styled-input" v-model.number="state.harmonicValue"
                                            :disabled="!controlsEnabled" min="0" step="1">
                                    </div>

                                    <!-- 频率类型 -->
                                    <div class="control-item">
                                        <label class="control-label">频率类型</label>
                                        <select class="styled-select" v-model="state.frequencyType"
                                            :disabled="!controlsEnabled">
                                            <option v-for="type in state.frequencyTypes" :value="type.value"
                                                :key="type.value">
                                                {{ type.label }}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, computed, watch, onMounted } from 'vue';
import { defaultFFTData, type FFTSettings } from '@/apis/task/dataAnalysis';

export default defineComponent({
    name: 'FFTConfigStep',
    props: {
        initialData: {
            type: Object as () => FFTSettings | null,
            default: null
        }
    },
    emits: ['valid'],
    setup(props, { emit }) {
        // 创建响应式状态对象
        const state: FFTSettings = reactive({
            ...defaultFFTData,
            ...(props.initialData || {})
        });

        // 计算属性
        const controlsEnabled = computed(() => state.harmonicInterpolation || state.thdEnabled);
        const rangeEnabled = computed(() => state.fullRange || state.customRange);
        const showCustomInput = computed(() => state.customRange && rangeEnabled.value);
        const showLastRange = computed(() => !state.customRange && state.lastRange.start !== 0.0);
        const displayOutputValue = computed(() =>
            state.outputControlEnabled ? state.tempOutputValue : state.outputValue
        );
        const displayFrequency = computed(() =>
            state.limitRangeEnabled ? state.tempFrequency : state.frequencyRange
        );
        const currentOptions = computed(() => state.paramOptions[state.selectedParamType]);
        const filteredChannels = computed(() =>
            state.channels.filter(channel =>
                channel.name.toLowerCase().includes(state.searchQuery.toLowerCase())
            )
        );
        const lastSelectedChannel = computed(() =>
            state.channels.find(c => c.id === state.selectedChannels.slice(-1)[0])
        );

        // 方法
        const getConfig = () => {
            return { ...state };
        };

        // 方法：更新谐波状态
        const updateHarmonicStatus = () => {
            if (!controlsEnabled.value) {
                state.harmonicValue = 0;
                state.frequencyType = 'spectrum';
            }
            validateForm();
        };

        // 方法：验证表单
        const validateForm = () => {
            const isValid = state.selectedChannels.length > 0;
            emit('valid', isValid);
        };

        // 方法：处理频率范围变更
        const handleRangeChange = () => {
            if (state.customRange) {
                state.lastRange = {
                    start: state.startFreq,
                    end: state.endFreq
                };
            }
            validateForm();
        };

        // 方法：处理输出控制开关变更
        const handleOutputControlChange = () => {
            if (!state.outputControlEnabled) {
                state.outputValue = state.tempOutputValue;
            } else {
                state.tempOutputValue = state.outputValue;
            }
            validateForm();
        };

        // 方法：处理输出值输入
        const handleOutputValueInput = (event: Event) => {
            const value = parseInt((event.target as HTMLInputElement).value) || 0;
            state.tempOutputValue = Math.min(value, state.maxOutputValue);
            validateForm();
        };

        // 方法：处理频率限制开关变更
        const handleLimitRangeChange = () => {
            if (!state.limitRangeEnabled) {
                state.frequencyRange = state.tempFrequency;
            } else {
                state.tempFrequency = state.frequencyRange;
            }
            validateForm();
        };

        // 方法：处理频率输入
        const handleFrequencyInput = (event: Event) => {
            const value = parseFloat((event.target as HTMLInputElement).value);
            state.tempFrequency = Math.min(value, 10000);
            validateForm();
        };

        // 方法：处理交叉谱开关变更
        const handleCrosspowerChange = () => {
            if (state.crosspowerEnabled) {
                state.referenceSignalsOptions = [
                    '<未指定>',
                    ...state.fullReferenceSignals
                ];
            } else {
                state.referenceSignalsOptions = ['<未指定>'];
                state.referenceSignal = '<未指定>';
            }
            validateForm();
        };

        // 方法：处理直流分量开关变更
        const handleDcToggle = () => {
            if (!state.dcEnabled) state.dcValue = 0.1;
            validateForm();
        };

        // 方法：处理通道点击选择
        const handleChannelClick = (channel: typeof state.channels[0]) => {
            const index = state.selectedChannels.indexOf(channel.id);
            if (index > -1) {
                state.selectedChannels.splice(index, 1);
            } else {
                state.selectedChannels.push(channel.id);
            }
            validateForm();
        };

        // 方法：计算分辨率相关参数
        const calculateParams = () => {
            const sr = state.sampleRate;
            switch (state.selectedParamType) {
                case 'lines':
                    state.selectedDf = parseFloat((sr / state.selectedValue).toFixed(4));
                    state.selectedDuration = parseFloat((state.selectedValue / sr).toFixed(4));
                    break;
                case 'df':
                    state.selectedLines = Math.round(sr / state.selectedValue);
                    state.selectedDuration = parseFloat((state.selectedLines / sr).toFixed(4));
                    break;
                case 'duration':
                    state.selectedLines = Math.round(sr * state.selectedValue);
                    state.selectedDf = parseFloat((sr / state.selectedLines).toFixed(4));
            }
            validateForm();
        };

        // 方法：更新参数选项（当参数类型变更时）
        const updateParamOptions = () => {
            switch (state.selectedParamType) {
                case 'lines': state.selectedValue = 1024; break;
                case 'df': state.selectedValue = 9.7656; break;
                case 'duration': state.selectedValue = 0.1024;
            }
            calculateParams();
        };

        // 方法：处理参数值变更
        const handleValueChange = () => {
            calculateParams();
        };

        // 方法：验证块大小输入
        const validateBlockInput = () => {
            state.blockValue = Math.max(1, Math.round(state.blockValue));
            validateForm();
        };

        // 监视器
        watch(() => [state.startFreq, state.endFreq], () => {
            if (state.startFreq > state.endFreq) state.startFreq = state.endFreq;
            if (state.endFreq < state.startFreq) state.endFreq = state.startFreq;
            state.lastRange = {
                start: state.startFreq,
                end: state.endFreq
            };
            validateForm();
        });

        // 生命周期钩子
        onMounted(() => {
            calculateParams();
            validateForm();
        });

        // 返回模板使用的所有属性和方法
        return {
            state,
            controlsEnabled,
            rangeEnabled,
            showCustomInput,
            showLastRange,
            displayOutputValue,
            displayFrequency,
            currentOptions,
            filteredChannels,
            lastSelectedChannel,
            getConfig,
            updateHarmonicStatus,
            handleRangeChange,
            handleOutputControlChange,
            handleOutputValueInput,
            handleLimitRangeChange,
            handleFrequencyInput,
            handleCrosspowerChange,
            handleDcToggle,
            handleChannelClick,
            calculateParams,
            updateParamOptions,
            handleValueChange,
            validateBlockInput
        };
    }
});
</script>
<style scoped>
/* 弹窗样式 */
.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.close-btn {
    cursor: pointer;
    border: none;
    background: none;
    font-size: 24px;
    color: #666;
    padding: 0 8px;
}

.close-btn:hover {
    color: #333;
}

.modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* 原有完整样式 */
.fft-container {
    display: flex;
    height: 70vh;
    min-height: 500px;
    background: #f5f5f5;
    font-family: Arial, sans-serif;
}

.left-panel {
    width: 280px;
    background: white;
    margin: 12px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 16px;
}

.section-header {
    margin-bottom: 12px;
}

.section-header h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #333;
}

.search-input {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.channel-list {
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.channel-item {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.right-panel {
    flex: 1;
    background: white;
    margin: 12px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.tabs {
    border-bottom: 1px solid #ddd;
    margin-bottom: 16px;
}

.tabs button {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
}

.tabs button.active {
    border-bottom: 2px solid #0078d4;
    color: #0078d4;
}

.form-section {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.form-label {
    font-size: 13px;
    color: #666;
    text-align: right;
    white-space: nowrap;
}

.checkbox-group.horizontal {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.checkbox-label {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input {
    position: absolute;
    opacity: 0;
}

.checkmark {
    width: 16px;
    height: 16px;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-label input:checked~.checkmark {
    background: #0078d4;
    border-color: #0078d4;
}

.checkmark:after {
    content: "✓";
    color: white;
    font-size: 12px;
    display: none;
}

.checkbox-label input:checked~.checkmark:after {
    display: block;
}

.styled-select {
    width: 100%;
    max-width: 240px;
    height: 36px;
    padding: 6px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 5L7 8.5L10.5 5' stroke='%23808080' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance: none;
}

.styled-input {
    width: 100%;
    max-width: 240px;
    height: 36px;
    padding: 6px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: white;
}

.resolution-section {
    background: #fff;
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dual-selector {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.type-select {
    background: #f8f8f8;
    border-color: #e0e0e0;
}

.params-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.dc-control {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f8f8f8;
    border-radius: 4px;
}

.hz-select {
    width: 80px;
    flex-shrink: 0;
}

.unit {
    color: #666;
    font-size: 12px;
    white-space: nowrap;
}

.action-buttons {
    margin-top: 24px;
    text-align: right;
}

.btn {
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn:hover {
    opacity: 0.9;
}

.confirm {
    background: #0078d4;
    color: white;
    border: 1px solid #0078d4;
}

.cancel {
    background: white;
    color: #666;
    border: 1px solid #ddd;
}

@media (max-width: 768px) {
    .fft-container {
        flex-direction: column;
    }

    .left-panel {
        width: auto;
        margin-bottom: 8px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-label {
        text-align: left;
    }

    .params-group {
        grid-template-columns: 1fr;
    }

    .styled-select,
    .styled-input {
        max-width: 100%;
    }
}

.form-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.triple-column {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.disabled-select {
    background-color: #f8f9fa;
    cursor: not-allowed;
    opacity: 0.7;
    color: #6c757d;
}

.output-control-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dual-inputs {
    display: flex;
    gap: 8px;
    flex: 1;
}

.scalar-settings {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
    color: #333;
    font-size: 14px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.dual-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.checkbox-group.vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.frequency-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.hyphen {
    color: #666;
}

.last-range {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

.disabled .checkmark {
    background-color: #f5f5f5;
    border-color: #ddd;
}

.disabled input:checked~.checkmark {
    background-color: #f5f5f5;
}

.harmonic-section {
    margin-top: 24px;
    border-top: 1px solid #eee;
    padding-top: 16px;
}

.dual-checkbox {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
}

.checkbox-item {
    display: flex;
    align-items: center;
}

.dual-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.control-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-label {
    font-size: 13px;
    color: #666;
}

/* 统一表单标签样式 */
.form-label {
    flex: 0 0 100px;
    /* 固定标签宽度 */
    text-align: right;
    padding-right: 12px;
    font-size: 13px;
    color: #606266;
    line-height: 36px;
    /* 保持与输入框高度一致 */
}

/* 统一下拉框样式 */
.styled-select {
    width: 220px !important;
    /* 统一宽度 */
    height: 36px;
    padding: 6px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    color: #606266;
    transition: border-color 0.2s;
    background-size: 12px;
}

.styled-select:hover {
    border-color: #c0c4cc;
}

.styled-select:focus {
    border-color: #0078d4;
    outline: none;
}

/* 统一输入框样式 */
.styled-input {
    width: 220px !important;
    height: 36px;
    padding: 6px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    color: #606266;
    line-height: 1.5;
}

/* 调整表单行布局 */
.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

/* 复选框组对齐优化 */
.checkbox-group.horizontal {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: nowrap;
}

.checkbox-label {
    display: flex;
    align-items: center;
    height: 36px;
    /* 保持与输入框同高 */
}

/* 参数组间距优化 */
.params-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin: 20px 0;
}

/* 双列布局优化 */
.dual-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
}

/* 标签对齐优化 */
.form-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 操作按钮对齐优化 */
.action-buttons {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid #ebeef5;
}

/* 弹窗内容区优化 */
.modal-content {
    padding: 20px 24px;
}

/* 分辨率设置标题 */
.resolution-section h3 {
    font-size: 14px;
    color: #303133;
    margin: 24px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebeef5;
}

/* 选项卡按钮对齐优化 */
.tabs button {
    min-width: 80px;
    text-align: center;
    padding: 8px 20px;
    transition: all 0.2s;
}

/* 统一禁用状态样式 */
:disabled,
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f5f7fa !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .dual-column {
        grid-template-columns: 1fr;
    }

    .form-label {
        text-align: left;
        padding-right: 0;
    }

    .styled-select,
    .styled-input {
        width: 100% !important;
    }
}

/* 统一所有输入控件的基础样式 */
input[type="text"],
input[type="number"],
select {
    /* 尺寸统一 */
    width: 160px;
    height: 36px;

    /* 盒模型统一 */
    padding: 6px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-sizing: border-box;

    /* 文本样式统一 */
    font-size: 13px;
    font-family: inherit;
    color: #333;

    /* 过渡效果 */
    transition: border-color 0.3s;
}

/* 下拉框特殊处理 */
select {
    appearance: none;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg...") no-repeat right 10px center;
    padding-right: 30px;
    /* 为下拉箭头预留空间 */
}

/* 输入框聚焦状态 */
input:focus {
    border-color: #0078d4;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
}

/* 特定情况适配 */
/* 块大小输入框 */
.resolution-section input[type="number"] {
    width: 120px;
    /* 适应较窄区域 */
}

/* 频率范围输入组 */
.frequency-inputs input {
    width: 100px;
}

/* 禁用状态 */
input:disabled,
select:disabled {
    background: #f8f9fa;
    cursor: not-allowed;
    opacity: 0.7;
}

/* 响应式处理 */
@media (max-width: 768px) {

    input[type="text"],
    input[type="number"],
    select {
        width: 100%;
    }
}
</style>